import React from 'react'
import {connect} from 'react-redux'
import { IndexLink,Link } from 'react-router'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import RComponent from '../../components'
import guidelineStyle from './guideline.scss'
import * as auth from '../../utils/auth'

class GuideLine extends RComponent{
    constructor(props, context){
        super(props, context)

        this.swipeImages = [
            {title:'title1',subtitle:'subtitle 1',img:'../images/two-index/leader_1.jpg'},
            {title:'title2',subtitle:'subtitle 2',img:'../images/two-index/leader_2.jpg'},
            {title:'title3',subtitle:'subtitle 3',img:'../images/two-index/leader_3.jpg'},
            {title:'title4',list:['list 1','list 2','list 3'],img:'../images/two-index/leader_4.jpg'}
        ]
        this.swipeWidth = 0;
        this.rate = 842/750;
        this.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        this.state = {
            _idx:0,
            width:this.width,
            height:this.width*this.rate,
            swipeWidth:0,
            wrapperWidth:this.width*this.swipeImages.length,
            translate3d:'translate3d(0,0,0)',
            enable:false
        }
        this.swipeOption = {
            sX:0,
            sY:0,
            eX:0,
            eY:0,
            min_x:30, // 水平滑动
            max_x:30, // 垂直 X 差异
            min_y:50, // 垂直滑动
            max_y:60, // 水平 Y 差异
            direc:''
        }
        this._idx = 0;
        this.startX = 0;
        this.startY = 0;
        this.offsetX = 0;
        this.offsetY = 0;
        this.startT = 0;
    }

    goAssetsConfig(){
        auth.setUserConfigureStatus('1');
        this.context.router.push('/quickConfig')
    }

    componentWillMount(){
    }

    componentDidMount(){
        window.addEventListener("resize", this.updateDimensions.bind(this));
    }
    componentWillUnmount(){
        window.removeEventListener("resize", this.updateDimensions.bind(this));
    }
    updateDimensions(){
        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        this.setState({
            width:width,
            height:width*this.rate,
            wrapperWidth:(this.swipeImages.length)*width,
            translate3d:'translate3d(-'+this._idx*width+'px,0,0)'
        })
    }

    handleStart(e){
        let t = e.touches[0]
        this.startX = t.pageX;
        this.startY = t.pageY;
        this.startT = new Date()*1;
        this.swipeOption.sX = t.screenX;
        this.swipeOption.sY = t.screenY;
    }

    handleMove(e){
        e.preventDefault();
        let t = e.touches[0];

        this.swipeOption.eX = t.screenX;
        this.swipeOption.eY = t.screenY;

        // var pgs = this.swipeImages;
        this.offsetX = t.pageX-this.startX;
        var offsetY = t.pageY-this.startY;
        if( offsetY<this.swipeOption.max_y&&offsetY>-this.swipeOption.max_y) {
            this.setState({translate3d:'translate3d('+((-this._idx)*this.width+this.offsetX)+'px,0,0)',transition:'none'})
        }
        // console.log('move= this._idx:'+this._idx+' this.offsetX:'+this.offsetX+' translate3d:'+this.state.translate3d+' if:'+(offsetY<this.swipeOption.max_y&&offsetY>-this.swipeOption.max_y))
    }

    handleEnd(){
        // 水平方向
        if ((((this.swipeOption.eX - this.swipeOption.min_x > this.swipeOption.sX) || (this.swipeOption.eX + this.swipeOption.min_x < this.swipeOption.sX)) && ((this.swipeOption.eY < this.swipeOption.sY + this.swipeOption.max_y) && (this.swipeOption.sY > this.swipeOption.eY - this.swipeOption.max_y)))) {
            if(this.swipeOption.eX > this.swipeOption.sX) this.swipeOption.direc = "r";
            else this.swipeOption.direc = "l";
        }
        // 垂直方向
        if ((((this.swipeOption.eY - this.swipeOption.min_y > this.swipeOption.sY) || (this.swipeOption.eY + this.swipeOption.min_y < this.swipeOption.sY)) && ((this.swipeOption.eX < this.swipeOption.sX + this.swipeOption.max_x) && (this.swipeOption.sX > this.swipeOption.eX - this.swipeOption.max_x)))) {
            if(this.swipeOption.eY > this.swipeOption.sY) this.swipeOption.direc = "d";
            else this.swipeOption.direc = "u";
        }

        // if (this.swipeOption.direc != "") {
        //     // if(typeof func == 'function') func(el,this.swipeOption.direc);
        //
        // }
        this.transition(this.swipeOption.direc)
        this.swipeOption.direc = "";

        this.startX = 0;
        this.startY = 0;
        this.startT = 0;
    }

    transition(direc){
        // console.log('direc:'+direc)
        switch(direc){
            case 'l':
                this._idx += 1;
                if(this._idx >= this.swipeImages.length-1){
                    this._idx = this.swipeImages.length-1
                }
                this.swipeWidth = -this._idx*this.state.width

                this.setState({
                    _idx:this._idx,
                    translate3d:'translate3d('+this.swipeWidth+'px,0,0)',
                    transition:'transform 0.15s linear',
                    enable:this._idx==this.swipeImages.length-1
                })
                break;
            case 'r':
                    this._idx -= 1;
                    if(this._idx <= 0){
                        this._idx = 0
                    }
                    this.swipeWidth = -this._idx*this.state.width;

                    this.setState({
                        _idx:this._idx,
                        translate3d:'translate3d('+this.swipeWidth+'px,0,0)',
                        transition:'transform 0.15s linear',
                        enable:this._idx==this.swipeImages.length-1
                    })
                    break;

        }
    }

    render(){
        let itemList = (lists)=>{
            let l = lists.map((item,i) => {
                return (
                    <div key={'gt-list-'+i}><span>{i}</span> {item}</div>
                )
            })
            return l;
        }
        let items = this.swipeImages.map((item,i) =>{
            return (
                <li className="guideline-item" key={'swipeItem_'+i} style={{width:this.state.width+'px'}}>
                    <img src={item.img} />
                    <div className={'guideline-text'+(item.list?' guideline-text2':'')}>
                        <h1>{item.title}</h1>
                        { item.subtitle?(
                        <h3>{item.subtitle}</h3>
                        ):null }
                        { item.list?itemList(item.list):null }
                    </div>
                </li>
            )
        })
        let guidelineDots = (n)=>{
            let dots = n.map((item,i) => {
                return (
                    <li key={'dot_'+i} className={this.state._idx==i?'active':''}></li>
                )
            })
            return (
                <ul className="guideline-dots" key="guideline-dots">
                    { dots }
                </ul>
            )
        }

        return (
            <div className="guideline-wrapper">
                <div className="guideline-box" style={{height:this.state.height+'px'}}>
                    <ul className="guideline" style={{width:this.state.wrapperWidth+'px',transform:this.state.translate3d,transition:this.state.transition}} onTouchStart={this.handleStart.bind(this)} onTouchMove={this.handleMove.bind(this)} onTouchEnd={this.handleEnd.bind(this)}>
                        {items}
                    </ul>
                    { guidelineDots(this.swipeImages) }
                </div>

                <div className="guideline-btnbox">
                    <div className="guideline-btn">
                        <button className="pi-btn pi-btn-block pi-btn-primary pi-btn-lg" disabled={!this.state.enable} onClick={this.goAssetsConfig.bind(this)}>
                            go
                        </button>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    state => state
)(GuideLine)
